<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        button {
            height: 30px;
            width: 100px;
            background-color: gray;
            font-size: 16px;
            color: white;
        }

        #box div {
            width: 400px;
            height: 200px;
            background-color: thistle;
            border: 2px solid gray;
            display: none;
        }

        .active {
            background-color: orange;

        }
    </style>

    <!-- js写法 -->
    <!-- <script>
        window.onload = function () {
            var box = document.getElementById("box");
            var btns = box.getElementsByTagName("button");
            var divs = box.getElementsByTagName("div");

            for (var i = 0; i < btns.length; i++) {
                btns[i].index = i;
                btns[i].onclick = function () {
                    for (var j = 0; j < btns.length; j++) {
                        //点击了按钮就把所有class和格式清空
                        btns[j].className = "";
                        divs[j].style.display = 'none';
                    }
                    //设置对应的按钮和div的设置
                    this.className = 'active';
                    divs[this.index].style.display = 'block';
                }
            }
        }
    </script> -->

    <!-- jq写法 -->
     <script src="jquery-3.4.1.js"></script>
    <script>
        $(function () {
            var btn = $('#box').find('button');
            var div = $('#box').find('div');

            btn.click(function () {

                btn.attr('class','');
                div.css('display','none');
                //设置颜色
                btn.eq($(this).index()).attr('class','active');
                //设置可见
                div.eq($(this).index()).css('display','block');
            });
        });

    </script>
</head>

<body>
    <div id="box">
        <button class="active">Html</button>
        <button>JavaScript</button>
        <button>jQuery</button>
        <div style="display: block;">
            HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
        </div>
        <div>JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript
            基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 </div>
        <div>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do
            More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。</div>
    </div>
</body>

</html>